/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, LineColumn, InputLine, TextArea, Input, SuffixInput,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useItemInputControl,
} from "../../common/base";

interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
}

//简易配置模型： 报告是手动拼凑的。注意修改name的一致性问题!
export const checkConfig真空=[['测试仪器型号','静电测试仪器'],['仪器精度','静电测试精度'],['导静电电阻',{n:'导静电电阻',u:'Ω'}],['连接处电阻',{n:'连接处电阻',u:'Ω'}],
    ['真空仪型号','真空仪型号'],['仪器精度','真空仪精度'],['空载时真空度',{n:'空载真空度',u:'Pa'}],['承载时真空度',{n:'承载真空度',u:'Pa'}],['真空泵型号','真空泵型号'],
    ['抽真空时间',{n:'抽真空时间',u:'h'}],['罐内真空度',{n:'罐内真空度',u:'Pa'}],['置换介质','抽空置换介质'],['置换压力',{n:'抽空置换压',u:'MPa'}],
    ['排放后罐内压力',{n:'排放后压力',u:'MPa'}],['罐内气体含氧量（≤3％）','含氧量']] as any[];
export const AdditionalTest=
    React.forwardRef((
        { children, show ,alone=true,label='附加检验-导静电装置检查'}:Props,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig真空.forEach(([ _,aName], i:number)=> {
                if (typeof aName === 'object' && aName.n && !aName.r)
                    fields[aName.n] =par[aName.n];
                else
                    fields[aName] =par[aName];
                // const namexD = `${aName}_D`;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        const somepartOf =React.useCallback((part: number) => {
            const partCfg= 1===part? checkConfig真空.slice(0,4) : 2===part? checkConfig真空.slice(4,8) : checkConfig真空.slice(8);
            return <>
                <LineColumn>
                    { partCfg.map(([title,aName]: any, i:number) => {
                        let name=aName;
                        if(typeof aName === 'object' && aName.n && !aName.r)
                            name=aName.n;
                        // oldunit=unit===null? '' : unit? unit:oldunit;
                        if(typeof aName === 'object' && aName.u)
                            return <InputLine key={i} label={title+`:`}>
                                <SuffixInput  value={inp?.[name] || ''}
                                              onChange={e => setInp({...inp,[name]: e.currentTarget.value||undefined})
                                              }>{aName.u}</SuffixInput>
                            </InputLine>;
                        else return <InputLine key={i} label={title+`:`}>
                            <Input  value={inp?.[name] || ''}
                                    onChange={e => {
                                        setInp({...inp,[name]: e.currentTarget.value||undefined});
                                    } } />
                        </InputLine>;
                    }) }
                </LineColumn>
            </>;
        },[inp, setInp]);
        // {i===4 && '安全附件检验-绝热层真空度检查:'}
        // {i===8 && '安全附件检验-罐体抽真空 、气体置换:'}
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label} column={0}>
                <Text variant="h5">{label}：</Text>
                导静电装置检查:
                { somepartOf(1) }
                绝热层真空度检查:
                { somepartOf(2) }
                罐体抽真空 、气体置换:
                { somepartOf(3) }
            </InspectRecordLayout>
        );
    } );

interface CorrosiveProps  extends InternalItemProps{
    jyjg?: string;          //默认 ='存在问题'
    titles?: any[];
}
//"附加检测结果"这个字段对应的描述可能变化：若不是'存在问题'的需要注入；【做法】直接根据序号从配置数组中定位该项目；
export const checkConfig腐蚀=[['介质名称','腐蚀介质名称'], ['腐蚀介质成分','腐蚀介质成分'], ['腐蚀介质含量',{n:'腐蚀介质含量',u:'%'}],
    ['腐蚀速度',{n:'腐蚀速度',u:'mm/y'}], ['腐蚀机理','腐蚀机理'], ['其他检验、检测','附加检验其他'],
    ['备注','附加检验备注'], ['存在问题','附加检测结果']] as any[];
export const Corrosive=
    React.forwardRef((
        { children, show ,alone=true,label='附加检验-腐蚀介质含量测定',jyjg='存在问题'}:CorrosiveProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig腐蚀.forEach(([ _,aName], i:number)=> {
                if (typeof aName === 'object' && aName.n && !aName.r)
                    fields[aName.n] =par[aName.n];
                else
                    fields[aName] =par[aName];
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label} column={0}>
                <Text variant="h5">{label}：</Text>
                腐蚀介质含量测定:
                <LineColumn>
                    { checkConfig腐蚀.map(([title,aName]: any, i:number) => {
                        if(i>4) return null;
                        let name=aName;
                        if(typeof aName === 'object' && aName.n && !aName.r)
                            name=aName.n;
                        // oldunit=unit===null? '' : unit? unit:oldunit;
                        if(typeof aName === 'object' && aName.u)
                            return <InputLine key={i} label={title+`:`}>
                                <SuffixInput  value={inp?.[name] || ''}
                                              onChange={e => setInp({...inp,[name]: e.currentTarget.value||undefined})
                                              }>{aName.u}</SuffixInput>
                            </InputLine>;
                        else return <InputLine key={i} label={title+`:`}>
                            <Input  value={inp?.[name] || ''}
                                    onChange={e => {
                                        setInp({...inp,[name]: e.currentTarget.value||undefined});
                                    } } />
                        </InputLine>;
                    }) }
                </LineColumn>
                {
                    checkConfig腐蚀.map(([title,aName], i:number)=> {
                        if(i<=4) return null;
                        //(7===i? jyjg : "附加检测结果"这个字段对应的描述可能变化：
                        return <React.Fragment key={i}>
                                {(7===i? jyjg : title) +`:`}
                                <TextArea  value={inp?.[aName] || ''} rows={i===7? 3 : 6}
                                           onChange={e => {
                                               inp[aName] = e.currentTarget.value||undefined;
                                               setInp({...inp});
                                           } } />
                        </React.Fragment>;
                    })
                }
            </InspectRecordLayout>
        );
    } );

